<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CapaciCalc</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/capacicalc.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/lib/graph3d.js"></script>
    <script type="text/javascript" src="js/capacicalc.js"></script>
    <script type="text/javascript" src="js/chart.js"></script>

    <script type="text/javascript">
    $( document ).ready(function() {
    });
    </script>

    <script type="text/javascript">
    var chart;
    var capacitor;

    function init() {

        // creo la chapa inferior
        var chapaInf = new Capacicalc.Chapa();
        chapaInf.setFnChapa(function(x, y) {
            return eval($('#inputChapaInf').val());
        });


        // creo la chapa superior
        var chapaSup = new Capacicalc.Chapa();
        chapaSup.setFnChapa(function(x, y) {
            return eval($('#inputChapaSup').val());
        });
        
        // creo el capacitor
        capacitor = new Capacicalc.Capacitor();
        capacitor.setChapaInf(chapaInf);
        capacitor.setChapaSup(chapaSup);
        updateCapacitor();

        // creo el chart de la chapa inferior 
        chart = new Chart.R3Chart();
        chart.setCapacitor(capacitor);
        chart.drawChapaInf($('#capacitorCanvasChapaInf')[0]);
        chart.drawChapaSup($('#capacitorCanvasChapaSup')[0]);
    }

    function updateCapacitor() {
        var maxX = $('#capacitorDepth').val();
        var maxY = $('#capacitorWidth').val();
        var maxZ = $('#capacitorHeight').val() / 100;
        capacitor.setMaxX(maxX);
        capacitor.setMaxY(maxY);
        capacitor.setMaxZ(maxZ);
    }

    function updateChapaInf() {
        updateCapacitor();
        chart.updateChapaInf();
    }


    function updateChapaSup() {
        updateCapacitor();
        chart.updateChapaSup();
    }
    </script>
  </head>

  <body>
    <div class="container">

    <h1>Capacicalc</h1>


    <form class="form-inline" role="form">
        <div class="panel panel-default">
            <div class="panel-heading">Informaci&oacute;n del Capacitor</div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="capacitorHeight">Altura (m)</label>
                    <input type="text" class="form-control" id="capacitorHeight" placeholder="Altura" value="10">
                </div>

                <div class="form-group">
                    <label for="capacitorWidth">Ancho (m)</label>
                    <input type="text" class="form-control" id="capacitorWidth" placeholder="Ancho" value="1">
                </div>

                <div class="form-group">
                    <label for="capacitorDepth">Profundidad (m)</label>
                    <input type="text" class="form-control" id="capacitorDepth" placeholder="Profundidad" value="1">
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-primary">Calcular!</button>
                </div>
            </div>
         </div>

        <div class="row"> 

            <div class="panel panel-default col-md-6">
                <div class="panel-heading">Chapa Inferior</div>
                <div class="panel-body">
                    <div class="input-group">
                        <input id="inputChapaInf" type="text" class="form-control" placeholder="z = f(x, y)" value="-Math.pow((x-0.5)*0.25, 2)">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default btn-md" onclick="javascript: updateChapaInf();">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </button>
                        </span>
                    </div>            
                    <div id="capacitorCanvasChapaInf" class="chart-div"></div>
                </div>
            </div>

            <div class="panel panel-default col-md-6">
                <div class="panel-heading">Chapa Superior</div>
                <div class="panel-body">
                    <div class="input-group">
                        <input id="inputChapaSup" type="text" class="form-control" placeholder="f(x, y)" value="Math.sin(4*x) * Math.cos(4*y) *0.1 + 5">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default btn-md" onclick="javascript: updateChapaSup();">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </button>
                        </span>
                    </div>            
                    <div id="capacitorCanvasChapaSup" class="chart-div"></div>
                </div>
            </div>
        </div>
    </form>

    <div class="panel panel-default col-md-12">
        <div class="panel-heading">Resultados</div>
            <div class="panel-body">
                <div class="resultados-div"></div>
            </div>            
        </div>
    </div>


    <script type="text/javascript">
    init();
    </script>
  </body>
</html>
